<template>
    <div class="index">
        <div class="tab clearfix">
            <div class="nvwa-logo-wrap">
                <img class="nvwa-logo" :src="staticImageUrl('images/home/nvWa_logo.png')" alt="logo" title="logo">
            </div>
            <ul class="tab-list clearfix">
                <li class="tab-item" data-show="index-home"><span class="positionR">首页<span class="item-border-line"></span></span></li>
                <li class="tab-item" data-show="index-store-apply"><span class="positionR">商家入驻<span class="item-border-line"></span></span></li>
                <li class="tab-item" data-show="index-city-acitvity"><span class="positionR">城市主题活动<span class="item-border-line"></span></span></li>
                <li class="tab-item" data-show="index-good-hound"><span class="positionR">好好探长招募<span class="item-border-line"></span></span></li>
                <li class="tab-item" data-show="index-contact-us"><span class="positionR">联系我们<span class="item-border-line"></span></span></li>
            </ul>
        </div>
        <div class="index-item index-home positionR">
            <div class="index-witem">
                <span class="down-icon positionR">
                    <img :src="staticImageUrl('images/index/down_icon_adriod.png')" alt="">
                    <span class="red-line"></span>
                    <img class="down-code" :src="staticImageUrl('images/index/index_down_code.png')" alt="">
                </span>
                <span class="down-icon positionR">
                    <img :src="staticImageUrl('images/index/down_icon_iphone.png')" alt="">
                    <span class="red-line"></span>
                    <img class="down-code" :src="staticImageUrl('images/index/index_down_code.png')" alt="">
                </span>
            </div>
            <img class="width-full item-main-img" :src="staticImageUrl('images/index/index_index.png')" alt="logo" title="logo">
            <copy-right></copy-right>
        </div>
        <div class="index-item index-store-apply positionR">
            <div class="video-box">
                <div class="positionR video-item-wrap video-discount">
                    <span class="border-color"></span>
                    <img class="index-play-icon positionAbCenter" :src="staticImageUrl('images/index/index_play_icon.png')" alt="">
                    <video class="index-video" loop="loop" :src="staticImageUrl('medio/index_discount.mp4')"></video>
                </div>
                <div class="positionR video-item-wrap video-store">
                    <span class="border-color"></span>
                    <img class="index-play-icon positionAbCenter" :src="staticImageUrl('images/index/index_play_icon.png')" alt="">
                    <video class="index-video" loop="loop" :src="staticImageUrl('medio/index_store.mp4')"></video>
                </div>
                <div class="positionR video-item-wrap video-topic">
                    <span class="border-color"></span>
                    <img class="index-play-icon positionAbCenter" :src="staticImageUrl('images/index/index_play_icon.png')" alt="">
                    <video class="index-video" loop="loop" :src="staticImageUrl('medio/index_topic.mp4')"></video>
                </div>
            </div>
            <img class="width-full item-main-img" :src="staticImageUrl('images/index/store_apply.png')" alt="logo" title="logo">
        </div>
        <div class="index-item index-city-acitvity positionR">
            <div class="active-code positionAbCenter" id="qrcode"></div>
            <img class="width-full item-main-img" :src="staticImageUrl('images/index/city_acitvity.png')" alt="logo" title="logo">
        </div>
        <div class="index-item index-good-hound positionR">
            <img class="width-full item-main-img" :src="staticImageUrl('images/index/good_hound.png')" alt="logo" title="logo">
            <img class="service-icon" :src="staticImageUrl('images/index/service_icon.jpg')" alt="">
            <img class="public-icon" :src="staticImageUrl('images/index/public_icon.jpg')" alt="">
        </div>
        <div class="index-item index-contact-us positionR">
            <img class="width-full item-main-img" :src="staticImageUrl('images/index/contact_us.png')" alt="logo" title="logo">
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: "IndexModlue1",
        data(){
            return{
                screenWidth:0,
            }
        },
        beforeCreate(){
            if(this.isPc){
                this.$router.push({path:'/mIndex'});
            }
        },
        created(){
            this.screenWidth = document.documentElement.clientWidth;
        },
        mounted(){
            this.tab()
            this.hoverDom();
        },
        methods:{
            tab(){
                $('.tab-list .tab-item').eq(0).addClass('active');
                $('.index-home').show();
                // $('.index-good-hound').show();
                $('.tab-list .tab-item').on('click',function () {
                    let dataShow = $(this).attr('data-show');
                    $('.tab-item').removeClass('active');
                    $(this).addClass('active');
                    $('.index-item').hide()
                    $('.'+dataShow).show();
                })
                this.produceCode();
            },
            hoverDom(){
                $('.border-color').on('mouseenter',function () {
                    $(this).siblings('video')[0].play();
                    $(this).siblings('.index-play-icon').hide()
                    $(this).hide();
                })
                $('.video-item-wrap video').on('mouseleave',function () {
                    $(this)[0].pause();
                    $(this).siblings('.index-play-icon').show()
                    $(this).siblings('.border-color').show();
                })
                $('.index-witem .down-icon').on('mouseenter',function () {
                    let that = this;
                    // $(this).find('.red-line').animate({width:0},500,function(){
                    //     $(that).find('.down-code').slideDown(500);
                    // });
                    $(this).find('.red-line').animate({width:0})
                })
                $('.index-witem .down-icon').on('mouseleave',function () {
                    let that = this;
                    // $(this).find('.down-code').slideUp(500,function(){
                    //     $(that).find('.red-line').animate({width:"100%"},500);
                    // });
                    $(this).find('.red-line').animate({width:"100%"},500);
                })
            },
            /*生成二维码*/
            produceCode(){
                console.log()
                let codeWidth = $('.active-code').width();
                new QRCode('qrcode',{
                    render: "div",
                    correctLevel: 0,
                    width: codeWidth,
                    height: codeWidth,
                    text: 'http://192.168.1.163:7181/act/circle/turr?actType=1&actCircleId=49&userId=2796&loginThirdId=0'
                })
            },

        },
        components:{
            'copy-right':()=>import('./components/copyRight')
        }
    }
</script>

<style scoped lang="scss">
    .index{
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .nvwa-logo{
        margin:0;
        width: .53rem;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .tab{
        width: 1300px;
        max-width: 100%;
        min-width: 800px;
        overflow: hidden;
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        height: .22rem;
        white-space: nowrap;
    }
    .tab-list{
        float: left;
        font-size: 16px;
        position: relative;
        white-space: nowrap;
        min-width: 640px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .nvwa-logo-wrap{
        float: left;
        height: .22rem;
    }

    .tab-item{
        float: left;
        border-right: 1px solid #000;
        padding: 0 .12rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
    }
    .tab-list .tab-item:last-child{
        border-right: none;
    }
    .item-border-line{
        width: 100%;
        display: none;
        background: #5d89e8;
        height: 2px;
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .tab-item:hover .item-border-line{
        display: inline-block;
    }
    .tab-item.active .item-border-line{
        display: inline-block;
    }
    .index-witem{
        position: absolute;
        right: .62rem;
        top: 1.3rem;
        z-index: 10;
    }
    .down-icon{
        display: inline-block;
        margin-right: .1rem;
        cursor: pointer;
        width: .32rem;
        img{
            width: 100%;
            position: relative;
            z-index: 2;
        }
        .red-line{
            display: inline-block;
            width: 100%;
            position: absolute;
            right: 0;
            height: 60%;
            top: 17%;
            background-color: #E41170;
        }
        .down-code{
            /*display: none;*/
            position: absolute;
            left: 0;
            top: 80%;
            width: 100%;
            z-index: 3;
            object-fit: cover;
        }
    }
    .index-item{
        display: none;
    }
    .video-box{
        position: absolute;
        left: .8rem;
        top: .21rem;
        z-index: 10;
    }
    .index-video,.video-item-wrap{
        width: .62rem;
        -webkit-border-radius: .03rem;
        -moz-border-radius: .03rem;
        border-radius: .03rem;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 2px solid #000;
    }
    .video-item-wrap{
        display: inline-block;
        border: none;
    }
    .video-store{
        left: 0;
        top: -.17rem;
        position: relative;
        margin-left: .11rem;
    }
    .video-topic{
        position: relative;
        left: -.02rem;
        top: 0;
        margin-left: .12rem;
    }
    .active-code{
        width: .46rem;
        height: .46rem;
        top: -.31rem;
        left: .06rem;
    }
    .border-color{
        width: 100%;
        z-index: 1;
        position: absolute;
        background-color: rgba(125,161,237,.6);
        height: 97.1%;
        -webkit-border-radius: .03rem;
        -moz-border-radius: .03rem;
        border-radius: .03rem;
    }
    .index-play-icon{
        width: 30%;
        z-index: 3;
    }
    .item-main-img{
        display: block;
    }
    .service-icon{
        width: .28rem;
        left: 1.27rem;
        top: 1.23rem;
        position: absolute;
        z-index: 1;
    }
    .public-icon{
        width: .28rem;
        left: 2.076rem;
        top: 1.23rem;
        position: absolute;
        z-index: 2;
    }
    #qrcode img{
        max-width: 100%!important;
    }
</style>
